<template>
  <view class="owner-info">
    <!-- 个人信息 -->
    <view class="info-section">
      <view class="section-title">个人信息</view>
      <view class="input-group">
        <view class="input-item">
          <text class="label">姓名</text>
          <input type="text" v-model="ownerInfo.name" placeholder="请输入姓名" />
        </view>
        <view class="input-item">
          <text class="label">手机号码</text>
          <input type="number" v-model="ownerInfo.phone" placeholder="请输入手机号码" maxlength="11" />
        </view>
        <view class="input-item">
          <text class="label">身份证号</text>
          <input type="text" v-model="ownerInfo.idCard" placeholder="请输入身份证号" maxlength="18" />
        </view>
        <view class="input-item">
          <text class="label">电子邮箱</text>
          <input type="text" v-model="ownerInfo.email" placeholder="请输入电子邮箱" />
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="button-group">
      <button 
        class="submit-button" 
        @tap="saveOwnerInfo" 
        :disabled="loading"
      >
        {{ loading ? '保存中...' : '保存信息' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ownerInfo: {
        name: '',
        phone: '',
        idCard: '',
        email: ''
      },
      loading: false
    }
  },
  onLoad() {
    this.getOwnerInfo()
  },
  methods: {
    getOwnerInfo() {
      try {
        // 模拟获取业主信息
        setTimeout(() => {
          this.ownerInfo = {
            name: '刘铁柱',
            phone: '13800138000',
            idCard: '110101199001011234',
            email: '245691516@qq.com'
          }
        }, 500)
        
        // 实际项目中应该调用API
        // const res = await this.$api.getOwnerInfo()
        // this.ownerInfo = res.data.ownerInfo
      } catch (error) {
        console.error('获取业主信息失败', error)
        uni.showToast({
          title: '获取信息失败',
          icon: 'none'
        })
      }
    },
    async saveOwnerInfo() {
      if (this.loading) return
      
      // 表单验证
      if (!this.ownerInfo.name) {
        return uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
      }
      
      if (!this.ownerInfo.phone || !/^1\d{10}$/.test(this.ownerInfo.phone)) {
        return uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
      }
      
      this.loading = true
      
      try {
        // 模拟保存
        setTimeout(() => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          this.loading = false
        }, 1500)
        
        // 实际项目中应该调用API
        // await this.$api.updateOwnerInfo({
        //   ownerInfo: this.ownerInfo
        // })
      } catch (error) {
        console.error('保存业主信息失败', error)
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
.owner-info {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.info-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(106, 17, 203, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #6a11cb;
}

.input-group {
  .input-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;
    
    .label {
      width: 160rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    input, .picker-value {
      flex: 1;
      font-size: 28rpx;
    }
    
    .picker-value {
      color: #333;
    }
  }
}

.button-group {
  padding: 0 20rpx;
  margin: 40rpx 0 120rpx;
  position: relative;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #6a11cb 0%, #8e44ad 100%);
  color: #fff !important;
  border-radius: 45rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  box-shadow: 0 8rpx 20rpx rgba(106, 17, 203, 0.3);
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  &:active::after {
    opacity: 1;
  }
  
  &:disabled {
    background: #cccccc;
    box-shadow: none;
    color: #ffffff;
  }
  
  &:active {
    transform: translateY(3rpx);
    box-shadow: 0 4rpx 10rpx rgba(106, 17, 203, 0.2);
  }
}
</style>
  